import React, { useState, useContext } from "react";
import { isNil } from "@ct0/functions";
import type { Dayjs } from "dayjs";
import dayjs from "dayjs";
import TimeValues from "../../DateTimeRange/components/TimeValues";
import DateTimeRangeBody from "../../DateTimeRange/components/Body";
import DataTimeRangeHeader from "../../DateTimeRange/components/Header";
import DateTimeRangeFooter from "../../DateTimeRange/components/Footer";
import { useStyle } from "../../DateTimeRange/useStyle";
import { ThemeContext } from "../../theme";

export { formatNumberTimestamp };

export default function DatetimeRange({
  value: propsValue,
  onChange,
  meta,
}: {
  value?: [number, number];
  onChange: (value?: [number, number]) => void;
  meta?: {
    startDatePlaceholder?: string;
    endDatePlaceholder?: string;
    startTimePlaceholder?: string;
    endTimePlaceholder?: string;
    clearText?: string;
    okText?: string;
    isChinese?: boolean;
  };
}) {
  const { fontSize } = useContext(ThemeContext);
  const classes = useStyle({ fontSize });
  const [value, setValue] = useState<[number | null, number | null]>(
    propsValue ?? [null, null]
  );
  const [viewDate, setViewDate] = useState(dayjs());

  const clear = () => onChange(undefined);
  const confirm = () => {
    const [start, end] = value;
    if (start !== null && end !== null) onChange([start, end]);
  };

  const confirmDisabled =
    value[0] === null || value[1] === null || value[0] === value[1];

  const timeHandler = ([start, end]: [Dayjs | null, Dayjs | null]) => {
    setValue([start ? start.valueOf() : null, end ? end.valueOf() : null]);
  };

  const dateHandler = ([start, end]: [Dayjs | null, Dayjs | null]) => {
    if (start === null || end === null) return;
    setValue([start.valueOf(), end.valueOf()]);
    return;
  };

  const selectedDate: [Dayjs | null, Dayjs | null] = [
    isNil(value[0]) ? null : dayjs(value[0]),
    isNil(value[1]) ? null : dayjs(value[1]),
  ];
  return (
    <div className={classes.container} style={{ position: "relative" }}>
      <TimeValues
        selectedDate={selectedDate}
        handleSelectedDate={timeHandler}
        startDatePlaceholder={meta?.startDatePlaceholder}
        startTimePlaceholder={meta?.startTimePlaceholder}
        endDatePlaceholder={meta?.endDatePlaceholder}
        endTimePlaceholder={meta?.endTimePlaceholder}
        isChinese={meta?.isChinese}
      />
      <DataTimeRangeHeader
        viewDate={viewDate}
        setViewDate={setViewDate}
        isChinese={meta?.isChinese}
      />
      <DateTimeRangeBody
        selectedDate={selectedDate}
        handleSelectedDate={dateHandler}
        viewDate={viewDate}
        isChinese={meta?.isChinese}
      />
      <DateTimeRangeFooter
        onClear={clear}
        onChange={confirm}
        disabled={confirmDisabled}
        okText={meta?.okText}
        clearText={meta?.clearText}
      />
    </div>
  );
}

function formatNumberTimestamp(v: number) {
  if (typeof v != "number") return "Invalid Date";
  return dayjs(v).format("YYYY-MM-DD HH:mm:ss");
}
